<!DOCTYPE html>
<html>
  <head>
    <title>无人探险试玩</title>
    <meta charset="utf-8">
  </head>
  <body>
	<script type="text/javascript" src="../libs/minicomps.min.js"></script>
	<script type="text/javascript" src="../libs/FileSaver.js"></script>
	<script type="text/javascript" src="../libs/easeljs.js"></script>
	<script type="text/javascript" src="../libs/createui.js"></script>
	<script type="text/javascript" src="../libs/helpWindow.js"></script>
	<script type="text/javascript" src="../libs/Unify.js"></script>
	<script>
	const { Toggle, HSlider,VSlider,Panel, Canvas ,Button,TextArea,TextBox,TextInput,Label,Window,LabelInput,TipsManager,RadioButton,ColorPicker,TabbarWindow,Checkbox,Knob,Stage,MoonTextArea,Dropdown,TabbarButton,ProgressBar} = mc
	const width = Stage.width;
	const height = Stage.height;
	const panel = new Panel(document.body, 0, 0, 10,10);
	var group=1;
	function updateColor(t){
		//console.log(t.toRGBString(),t.toString());
		if(currPanel&&currPanel.updateColor){
			currPanel.updateColor(t);
		}
	}
	var colors=['rgba(255,255,0,0.1)','#FF0000','#00bb00','#11dddd','#BB3300','#666600','#660000','#333399','#006666','#006633','#003300','#0033ff'];
			
	const helper=new HelpWindow(width,height);

	/**数字格式，把小于10的数在前面加个0*/
	function numberFormat(num){
		if(num>=10)			return String(num);
		else				return "0"+num;
	}
	/**复制行数*/
	function copyString(input){
		input.select();
		document.execCommand('Copy');
		TipsManager.alert('复制成功');
	}
	//基础面板
	class BasicPanel {
		constructor(label){
			this.isShow=true;
            this.p=new Canvas(document.body, 0, 0,width-10,height-15);
			this.p.setColorDark();
			new Label(this.p,5,-15,label).setBold(true).setFontSize(15);
		}
		set visible(value){//复盖父级方法
			if(this.isShow!=value){
				if(value) this.p.addFromParent();
				else	  this.p.removeFromParent();
			}
			this.isShow=value;
		}
		initData(){//子类去实现

		}
		setData(data){//子类去实现

		}
		setDataWindow(){
			this.dataWindow=new Window(this.p,0,0,window.innerWidth-150,window.innerHeight-100);
			this.dataWindow.visible=false;
			this.dataText=new MoonTextArea(this.dataWindow,0,22).setSize(this.dataWindow.width,this.dataWindow.height);
			this.dataWindow.btnClose=new Button(this.dataWindow,0,0,'复制关闭窗口',(e)=>{
				copyString(this.dataText.input);
				this.dataWindow.visible=false;
			});
			this.dataWindow.setContent=(str)=>{
				this.dataWindow.visible=true;
				this.dataText.text=str;
			}
		}
	}
	//-----------------地图编辑大师-----------------
	class MapToolPanel extends BasicPanel{
		constructor(label){
			super(label);
			this.propBtns=[];
			this.currSelMaps={};
			this.initView();
			this.initStage();
			this.initData();
		}
		initView(){
			this.canvas=new Canvas(this.p, 150, 0,width-160,height-15);
			this.realityCanvas=this.canvas.realityCanvas;
			var [x,y]=[20,-10];
			var [xNum,yNum,size]=[39,23,32];
			this.centerX=xNum*size/2;
			this.centerY=yNum*size/2;
			new Button(this.p,x,y+=22,'读取数据试玩',(e)=>{TipsManager.SureCancel(`把数据输入到下方`,this.createMap.bind(this),true)});

			this.status=1;
			new Button(this.p,x,y+=25, '继续编辑',(e)=>{window.location.href='gameMapEditer2.html';});

			this.inputLabel=new LabelInput(this.p,5,y+=22,'中心x轴y轴').input;
			this.inputLabel.setSize(60).text='200,200';
			this.inputLabel.x-=20;
			new Button(this.p,x,y+=25, '修改中心点',(e)=>{this.updateRedPoint()});

			this.setDataWindow();


		}
		updateRedPoint(){
			console.log(this.inputLabel)
			let pos=this.inputLabel.text.split(',');
			this.centerX=Number(pos[0]);
			this.centerY=Number(pos[1]);
			this.redPoint.x=this.centerX;
			this.redPoint.y=this.centerY;
			
		}
		onInput(e){
			let i=this.inputs.indexOf(e.target);
			let text=e.detail;
			this.maps.forEach((a)=>{
				if(a.data.id==i){
					a.data.text=text;
					a.update();
				}
			})
		}
		initStage(){
			var stage = createui.initStage(this.realityCanvas,this.update.bind(this));
			this.stage=stage;
			this.createBg('#ffffff');
			this.mapLayer=new createjs.Container();
			this.stage.addChild(this.mapLayer);		
		}
		initData(){
			var data={"size":"39,23,32","19,8":{"id":8,"pos":"-16,112","event":1,"config":"13,1"},"11,9":{"id":8,"pos":"-272,80","event":1,"config":"5,1"},"15,9":{"id":5,"pos":"-144,80","event":5},"19,9":{"id":2,"pos":"-16,80","event":2,"config":"2,50,100,100"},"23,9":{"id":5,"pos":"112,80","event":5},"27,9":{"id":8,"pos":"240,80","event":1,"config":"5,1"},"9,11":{"id":8,"pos":"-336,16","event":1,"config":"1,3"},"11,11":{"id":8,"pos":"-272,16","event":3,"config":"3,3"},"27,11":{"id":8,"pos":"240,16","event":4,"config":"3,3"},"29,11":{"id":8,"pos":"304,16","event":1,"config":"1,3"},"11,13":{"id":8,"pos":"-272,-48","event":1,"config":"5,1"},"15,13":{"id":2,"pos":"-144,-48","event":2,"config":"3,100,0,120","param":"6,6,100,100"},"19,13":{"id":5,"pos":"-16,-48","event":5},"23,13":{"id":2,"pos":"112,-48","event":2,"config":"1,100,0,120"},"27,13":{"id":8,"pos":"240,-48","event":1,"config":"5,1"},"19,14":{"id":8,"pos":"-16,-80","event":1,"config":"13,1"}}
			this.createMap({detail:true,value:JSON.stringify(data)});
		}
		update(dt){
			if(this.ballMoves){
				this.ballMoves.forEach(a=>a.update(dt));
			}
		}
		createMap(e){
			if(e.detail){
				this.ballMoves=[];
				this.mapLayer.removeAllChildren();
				if(e.value){
					try{
						var json=JSON.parse(e.value);
						var [ x, y ,w] = json.size.split(',').map(a=>Number(a));
						//w=32;
					}catch (error) {
						TipsManager.alert('JSON数据错误');
						console.error('JSON数据错误');
						return;
					}
				}else{
					var [ x, y ,w] = [Number(this.xTxt.text),Number(this.yTxt.text),Number(this.wMap.text)];
				}
				this.maps=[];
				this.mapDatas=[];
				for(let i=0;i<y;i++){
					this.mapDatas.push([]);
					for(let j=0;j<x;j++){
						let map=new MapItem(w,w);
						map.pos=[j,i];
						this.mapLayer.addChild(map);
						this.maps.push(map);
						this.mapDatas[i].push(map);
					}
				}
				Unify.displayRank(this.maps,x);
				this.minMapWid=w;
				if(json){
					for(var key in json){
						let da=json[key];
						if(key=='size') continue;
						let [x,y]=key.split(',').map(a=>Number(a));
						let map=this.mapDatas[y][x];
						let id=da.id;
						da['text']=id;
						da['color']=colors[id];
						map.setData(da);
						if(da.event==1||da.event==3||da.event==4){
							let id=da.event;
							let [numX,numY]=[0,0]
							if(da.config)[numX,numY]=da.config.split(',').map(a=>(Math.floor(a/2)));
							let [minX,maxX,minY,maxY]=[x-numX,x+numX,y-numY,y+numY];
							for(let i=minX;i<=maxX;i++){
								for(let j=minY;j<=maxY;j++){
									let mp=this.mapDatas[j][i];
									if(mp!=map){
										let da={'id':id,'text':id,'color':colors[id]};
										mp.setData(da);
									}
								}
							}
						}else if(da.event==2){
							map.initDrawBox();
							var ballMove=new BallMove(w,w);
							this.mapLayer.addChild(ballMove);
							[ballMove.x,ballMove.y]=[map.x+w/2,map.y+w/2];
							console.log(da.param)
							if(da.config){//有参数，修改外观
								ballMove.setConfig(da.config);
							}
							if(da.param){//有参数，修改外观
								ballMove.setShape(da.param.split(','));
							}
							this.ballMoves.push(ballMove);
						}
					}
				}
				this.redPoint.x=x*w/2;
				this.redPoint.y=y*w/2;
			}
		}
		createBg(color){
			if(!this.bg){
				this.bg=new createjs.Shape();
				this.bg.graphics.beginFill(color).drawRect(0,0,this.canvas.width,this.canvas.height);
				this.stage.addChildAt(this.bg,0);
			}else{
				this.bg.graphics.clear().beginFill(color).drawRect(0,0,this.canvas.width,this.canvas.height);
			}
			let center=new createjs.Shape();
			center.graphics.beginFill('#ff0000').drawCircle(0,0,5);
			[center.x=this.centerX,center.y=this.centerY];
			this.stage.addChild(center);
			
			this.redPoint=center;//红点
		}
	}
	class MapItem extends createjs.Container{
		constructor(w,h){
			super();
			this.data={id:0};
			this.width=w;
			this.height=h;
			this.shape=new createjs.Shape();
			this.colorBg="rgba(255,255,0,0.1)";
			this.colorMap="rgba(255,0,0,1)";
			this.drawBox(this.colorBg);
			this.addChild(this.shape);
			this.label=new createjs.Text('',"15px Arial", "#ffffff");
			this.label.x=3;
			this.label.y=3;
			this.label.textAlign='left';
			this.addChild(this.label);
		}
		initDrawBox(){
			this.drawBox(this.colorBg);
			this.label.text='';
		}
		drawBox(color){
			let[w,h]=[this.width,this.height];
			this.shape.graphics.clear();
			this.shape.graphics.setStrokeStyle(1);
			this.shape.graphics.beginStroke("black");
			this.shape.graphics.beginFill(color).drawRect(0,0,w,h);
		}
		hitTest(x,y){
			if(x>=this.x&&x<=this.x+this.width){
				if(y>=this.y&&y<=this.y+this.height){
					return true;
				}
			}
			return false;
		}
		setData(data){
			this.data.id=data.id;
			this.data.text=data.text;
			this.data.color=data.color;
			this.data.event=data.event;
			this.data.param=data.param;
			this.data.config=data.config;
			this.data.pos=data.pos;
			this.update();
		}
		setNewId(data){
			this.data.id=data.id;
			this.data.text=data.id;
			this.data.color=colors[data.id];
			this.data.event=data.event;
			this.data.config=data.config;
			this.data.pos=data.pos;
			this.update();
		}
		update(){
			this.label.text=this.data.text||'';
			this.drawBox(this.data.color);
			//console.log(this.label.text,this.data.color);
		}
	}
	class BallMove extends createjs.Container{
		constructor(w,h){
			super();
			this.width=w;
			this.height=h;
			this.shape=new createjs.Shape();
			this.colorBg="rgba(255,0,0,0.5)";
			this.drawBall(this.colorBg);
			this.addChild(this.shape);
		}
		drawBall(color){
			let[w,h]=[this.width,this.height];
			this.shape.graphics.clear();
			this.shape.graphics.setStrokeStyle(1);
			this.shape.graphics.beginStroke("black");
			this.shape.graphics.beginFill(color).drawCircle(0,0,w/2);
		}
		setConfig(config){
			var [moveType,speed,mx,my]=config?config.split(',').map(a=>Number(a)):[];
			this.moveType=moveType||0;
			this.speed=speed||100;
			this.mx=mx||0;
			this.my=my||0;
			this.my=-this.my;
			this.sign=1;
			this.ox=this.x;//初始位置
			this.oy=this.y;//初始位置
			this.gapx=this.ox+this.mx;//x轴距离
			this.gapy=this.oy+this.my;//y轴距离
			this.va=0;//初始数值
		}
		update(dt){
			var [ox,oy,si,sp,mx,my,gapx,gapy]=[this.ox,this.oy,this.sign,this.speed,this.mx,this.my,this.gapx,this.gapy];
			var sp=this.speed*dt*0.001;
			this.node=this;
			switch(this.moveType){
				case 0://不动
					break;
				case 1://直
					this.node.x+=mx!=0?sp*si:0;
					this.node.y+=my!=0?sp*si:0;
					if(my!=0){
						if(my>0){
							if(this.node.y>gapy)        {this.sign=-1;  this.node.y=gapy;}
							else if(this.node.y<oy)     {this.sign=1;   this.node.y=oy;}
						}else{
							if(this.node.y>oy)          {this.sign=-1;  this.node.y=oy;}
							else if(this.node.y<gapy)   {this.sign=1;   this.node.y=gapy;}
						}
					}
					if(mx!=0){
						if(mx>0){
							if(this.node.x>gapx)        {this.sign=-1;  this.node.x=gapx;}
							else if(this.node.x<ox)     {this.sign=1;   this.node.x=ox;}
						}else{
							if(this.node.x>ox)          {this.sign=-1;  this.node.x=ox;} 
							else if(this.node.x<gapx)   {this.sign=1;   this.node.x=gapx;}
						}
					}
					break;
				case 2://圆
						this.va+=sp*0.05;
						this.node.x=ox+Math.sin(this.va)*mx;
						this.node.y=oy+Math.cos(this.va)*my;
					break;
				case 3://自转
						this.va=sp;
						this.node.rotation+=this.va;
					break;
				case 4://方
					let[maxx,maxy]=[gapx,gapy];
					//mx>0时逆时针,my>0向上
					if(this.node.x<maxx&&this.node.y==oy){
						this.node.x+=this.getVal(sp,1);
						if(this.node.x>maxx) this.node.x=maxx;
					}else if(this.node.y<maxy&&this.node.x==maxx){
						this.node.y+=this.getVal(sp,1);
						if(this.node.y>maxy) this.node.y=maxy;
					}else if(ox<this.node.x&&this.node.x<=maxx&&this.node.y==maxy){
						this.node.x+=this.getVal(sp,-1);
						if(this.node.x<ox) this.node.x=ox;
					}else if(this.node.y<=maxy&&this.node.x==ox){
						this.node.y+=this.getVal(sp,-1);
						if(this.node.y<oy) this.node.y=oy;
					}
					if(mx<0){//mx<0时顺时针
						if(this.node.x>maxx&&this.node.y==oy){
							this.node.x+=this.getVal(sp,-1);
							if(this.node.x<maxx) this.node.x=maxx;
						}else if(maxx<=this.node.x&&this.node.x<ox&&this.node.y==maxy){
							this.node.x+=this.getVal(sp,1);
							if(this.node.x>ox) this.node.x=ox;
						}
					}
					if(my<0){//my<0向下
						if(this.node.y>maxy&&this.node.x==maxx){
							this.node.y+=this.getVal(sp,-1);
							if(this.node.y<maxy) this.node.y=maxy;
						}else if(this.node.y>=maxy&&this.node.x==ox){
							this.node.y+=this.getVal(sp,1);
							if(this.node.y>oy) this.node.y=oy;
						}
					}
					break;
			}
		}
		getVal(sp,s){
			return sp*s;
		}
		/**设置形状*/
		setShape(datas){
			let [type,num,gapX,gapY]=datas.map(a=>Number(a));
			num=num||2,gapX=gapX||10,gapY=gapY||10;
			let nodes=[];
			for(let i=0;i<num;i++){
				let w=this.width;
				let node=new BallMove(w,w);
				this.addChild(node);
				nodes.push(node);
			}
			nodes.forEach(a=>this.addChild(a));
			
			this.shape.graphics.clear();

			switch(type){
				case 1://横
					this.nodeRank(nodes,num,gapX,gapY);
				break;
				case 2://竖
					this.nodeRank(nodes,1,gapX,gapY);
				break;
				case 3://十字
					let [n1s,n2s,self]=[[],[],parseInt(num/2)];
					for(let i=0;i<num;i++){
						let node=nodes[i];
						if(i<self)  n1s.push(node);
						else        n2s.push(node);
					}
					this.nodeRankToCenter(n1s,self,gapX,gapY);
					this.nodeRankToCenter(n2s,1,gapX,gapY);
				break;
				case 4://横（左右对称）
					this.nodeRankToCenter(nodes,num,gapX,gapY);
				break;
				case 5://竖（上下对称）
					this.nodeRankToCenter(nodes,1,gapX,gapY);
				break;
				case 6://圆
					let va=Math.PI*2/num;
					for(let i=0;i<num;i++){
						let node=nodes[i];
						node.x=Math.sin(va*i)*gapX;
						node.y=Math.cos(va*i)*gapY;
					} 
				break;
			}
		}
		/**排版*/
		nodeRank(array,xNum=1,xDis=0,yDis=0,x=0,y=0,sign=1){
			for(let i=0;i<array.length;i++){
				let display=array[i];
				display.x=x+parseInt(i%xNum)*(display.width+xDis)*sign;
				display.y=y+parseInt(i/xNum)*(display.height+yDis)*-sign;
			}
		}
		/**中心对齐排列,s为-1是左下到上,s为1时左上到下*/
		nodeRankToCenter(nodes,xNum=1,xDis=0,yDis=0,xOff=0,yOff=0,s=-1){
			if(nodes.length==0) return;
			var node=nodes[0];
			var len=nodes.length;
			var w=((node.width+xDis)*(xNum-1))/-2;
			var h=((node.height+yDis)*Math.ceil(len/xNum-1))/2*s;
			for(var i=0;i<len;i++){
				node=nodes[i];
				node.x=w+Math.floor(i%xNum)*(node.width+xDis)+xOff;
				node.y=h-Math.floor(i/xNum)*(node.height+yDis)*s+yOff;
			}
		}
	}
	//--所有面板----
	var btnNames=['地图编辑'];
	var buttons=[];
	var currPanelIndex=0;
	var currPanel=null;
	for(var i=0;i<btnNames.length;i++){
		var btn=new Button(panel,2,2+22*i,btnNames[i],onClick);
		buttons.push(btn);
		btn.setSize(88);
		btn.name=i;
	}
	
	function onClick(e){
		let btn=e.target;
		changeView(btn);
	}
	function changeView(btn){
		let name=btn.name;
		buttons.forEach((b)=>{b.enabled=true;});
		btn.enabled=false;
		for(var i=0;i<panels.length;i++){
			panels[i].visible=false;
		}
		currPanel=panels[name]
		currPanel.visible=true;
		currPanel.initData();
		currPanelIndex=name;
		
	}
	var panelClass=[
		[MapToolPanel,'地图编辑大师']
	];
	var panels=[];
	for(var i=0;i<panelClass.length;i++){
		let panel=new panelClass[i][0](panelClass[i][1]);
		panel.visible=false;
		panels.push(panel);
	}
	changeView(buttons[0]);
	</script>
  </body>
</html>